<nz-modal [(nzVisible)]="isChangePwVisible" [nzTitle]="ChangePwTitle" (nzOnCancel)="handleChangePwCancel()"
	(nzOnOk)="handleChangePwOk()" [nzOkLoading]="isChangePwOkLoading" [nzFooter]="null" nzClassName="changePassword"
	[nzMaskStyle]="maskStyle">
	<div class="avatarWrapper">
		<!-- <nz-avatar [nzSize]="64" nzIcon="user"></nz-avatar> -->
		<div class="headDiv"><i class="iconfont icon-user"></i></div>
		<div style="margin-top: 10px;font-size: 17px;">{{currentUserName}}</div>
	</div>
	<div class="formWrapper" style="width: 100%; height: 4.45rem; margin-top: 50px;">
		<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">

			<nz-form-item nz-row>
				<nz-form-label nz-col nzSpan="11" nzFor="currentPassword">{{'Layout.Header.change_password.Current_Password' | translate}}</nz-form-label>
				<nz-form-control nz-col nzSpan="5" nzRequired="false">
					<input nz-input type="password" id="currentPassword" formControlName="currentPassword" />
					<nz-form-explain
						*ngIf="validateForm.get('currentPassword')?.hasError('required')">
						{{'Layout.Header.change_password.passwordValidWord' | translate}}</nz-form-explain>
					<nz-form-explain *ngIf="validateForm.get('currentPassword')?.hasError('isSameWithOldPassword')">
						{{ 'Layout.Header.change_password.same_password' | translate}}</nz-form-explain>
				</nz-form-control>
			</nz-form-item>
			<nz-form-item nz-row>
				<nz-form-label nz-col nzSpan="11" nzFor="newPassword">{{ 'Layout.Header.change_password.New_Password' | translate}}</nz-form-label>
				<nz-form-control nz-col nzSpan="5" nzRequired="false">
					<input nz-input type="password" id="newPassword" formControlName="newPassword" />
					<nz-form-explain *ngIf="validateForm.get('newPassword')?.hasError('required')">
						{{ 'Layout.Header.change_password.new_passwordValidWord' | translate}}</nz-form-explain>
					<nz-form-explain *ngIf="validateForm.get('newPassword')?.hasError('isSameWithOldPassword')">
						{{ 'Layout.Header.change_password.same_password' | translate}}</nz-form-explain>
					<!-- <nz-form-explain *ngIf="validateForm.get('newPassword')?.hasError('isSamePassword')">
						{{ 'Layout.Header.change_password.different_password' | translate}}</nz-form-explain> -->
				</nz-form-control>
			</nz-form-item>
			<nz-form-item nz-row>
				<nz-form-label nz-col nzSpan="11" nzFor="newPasswordAgain">{{ 'Layout.Header.change_password.new_password_again' | translate}}</nz-form-label>
				<nz-form-control nz-col nzSpan="5" nzRequired="false">
					<input nz-input type="password" id="newPasswordAgain" formControlName="newPasswordAgain" />
					<nz-form-explain *ngIf="validateForm.get('newPasswordAgain')?.hasError('required')">
						{{ 'Layout.Header.change_password.new_password_again_invalid' | translate}}</nz-form-explain>
					<nz-form-explain *ngIf="validateForm.get('newPasswordAgain')?.hasError('isSamePassword')">
						{{ 'Layout.Header.change_password.different_password' | translate}}</nz-form-explain>
				</nz-form-control>
			</nz-form-item>

			<nz-form-item nz-row style="margin-bottom:8px;">
				<nz-form-control nz-col nzSpan="24" style="text-align:center">
					<button nz-button nzType="defalt" style="width: 10%;"
						(click)="isChangePwVisible = false">{{ 'Layout.Header.change_password.Cancel' | translate}}</button>
					<button nz-button nzType="primary" style="width: 10%; margin-left: 10px;" (click)="submitForm()"
						>{{ 'Layout.Header.change_password.Save' | translate}}</button>
				</nz-form-control>
			</nz-form-item>
		</form>
	</div>

</nz-modal>
<ng-template #ChangePwTitle style="background-color: #262a4c;"> 
	<i nz-tooltip nzTitle="setup" nzPlacement="bottom" class="iconfont icon-shezhi font-20-rem cur-p" style="color: white;"></i>
	<span style="background-color: #262a4c; color: white;">Account Settings</span>
</ng-template>